<template>
  <tk-container>
    <tkui-header center>
      <tkui-button class="icon small" slot="left-menu" @click.native = '$router.go(-1)'>
        <tk-icon>return</tk-icon>
      </tkui-button>
      用户注册
    </tkui-header>
    <div class="body">
      <my-input label = '账号' type = 'text' v-model = 'phonenumber' placeholder = '请输入手机号'></my-input>
      <my-input label = '密码' type = 'password' v-model = 'password' placeholder = '请输入密码'></my-input>
      <my-input label = '车牌号' type = 'text' v-model = 'plateNumber' placeholder = '请输入车牌号'></my-input>
      <div class="layout">
        <div class="layout_title">车型</div>
        <tk-flex middle average class = 'layout-body'>
          <label><input type="checkbox" v-model="Models" value="SUV">SUV</label>
          <label><input type="checkbox" v-model="Models" value="普通5座车">普通5座车</label>
          <label><input type="checkbox" v-model="Models" value="7座面包车">7座面包车</label>
        </tk-flex>
      </div>
      <div class="layout">
        <div class="layout_title">日常行驶区域</div>
        <tk-flex middle class = 'layout-body'>
          城市
          <select v-model = 'city'>
            <option value="石家庄市">石家庄市</option>
            <option value="北京市">北京市</option>
          </select>
          县
          <select v-model = 'county'>
            <option value="石家庄市市区">石家庄市市区</option>
            <option value="北京市市区">北京市市区</option>
          </select>
        </tk-flex>
      </div>
      <tkui-button class="block raised btn" :class = '[verify ? "primary" : "disable"]' @click.native = 'register'>立即注册</tkui-button>
    </div>
  </tk-container>
</template>
<script>
  import myInput from 'components/input'
  export default {
    data () {
      return {
        phonenumber: '',
        password: '',
        plateNumber: '',
        Models: [],
        city: '石家庄市',
        county: '石家庄市市区'
      }
    },
    computed: {
      verify () {
        return this.phonenumber && this.password && this.plateNumber && this.Models.length
      }
    },
    methods: {
      register () {
        if (!this.verify) return false
        this.$tkAjax.post('/1.1/users', {
          'username': this.plateNumber,
          'driving_area': this.city + this.county,
          'password': this.password,
          'models': this.Models,
          'mobilePhoneNumber': this.phonenumber
        }).then(res => {
          console.log(res)
        }).catch(error => {
          console.log(error)
        })
      }
    },
    components: {
      myInput
    }
  }
</script>
<style lang="scss" scoped>
  @import '../assets/scss/main';
  .body {
    margin-top: 20px;
    padding: 0 $gutter;
    .layout{
      margin: 10px 0;
      .layout_title{
        height:30px;
        line-height:30px;
      }
      .layout-body {
        height: 40px;
        label{
          text-align: center;
          input{
            margin-right: 10px;
          }
        }
        select{
          margin:0 10px;
          padding: $gutter-min;
          outline:none;
          border:1px solid $border-color;
        }
      }
    }
    .btn{
      margin-top:30px;
    }
  }
</style>
